<template>
  <div class="inputContainer">
                    <textarea v-model="inputValue" placeholder="留下你精彩的评论吧" style="background-color: transparent;border: none;resize: none;
outline: none;"/>
    <div class="textOperater">
      <ul>
        <li>
          <t-tag theme="primary" v-if="file" closable variant="light">{{file}}</t-tag>
        </li>
      </ul>
      <div class="operate-right"  style="display: flex;align-items: center">
<!--        <t-upload-->
<!--            :beforeUpload="beforeUpload"-->
<!--            :showImageFileName="false"-->
<!--            action="https://service-bv448zsw-1257786608.gz.apigw.tencentcs.com/api/upload-demo"-->
<!--            style="margin-right: 10px"-->
<!--            theme="custom"-->
<!--            :value="file"-->
<!--        >-->
<!--          <t-button shape="circle" theme="primary">-->
<!--            <template #icon> <CloudUploadIcon class="t-iocn" /></template>-->
<!--          </t-button>-->

<!--        </t-upload>-->
        <t-button @click="handleSend" shape="circle" theme="primary">
          <template #icon>
            <SendIcon  style="transform: rotateZ(-90deg)"/>
          </template>
        </t-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import {CloudUploadIcon, SendIcon} from "tdesign-icons-vue-next";

const inputValue = ref('')
const emit = defineEmits(["handleSend"]);

// 点击发送时
const handleSend = () => {
  emit('handleSend' , inputValue.value)
}

const beforeUpload = (file) => {
  console.log(file);
}
const file = ref(null);
</script>

<style scoped>
.textOperater {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inputContainer {
  background-color: rgb(44, 44, 44);
  border: 1px solid rgb(94, 94, 94);
  border-radius: 20px;
  box-sizing: border-box;
  padding: 20px;
  width: 100%;

}

.inputContainer textarea {
  font-size: 16px;
  color: #c0c0d6;
  width: 100%;
}
</style>
